<template>
	<div id="cart">
		<div class="cart_top">
			购物车
			<van-icon v-if="isDenglu.token && isHisGoods" @click="remove_xuanzhong" style="position: absolute; right: 20px; top: 20px;" color="#ccc" name="delete-o" />
		</div>
		<!-- 登录购物车 -->
		<div class="go_login" v-if="!isDenglu.token">
			<van-icon class="icon" name="flower-o" @click="$router.push({name:'login'})"/>
			<p>您还没有登录，若要进行购买，请点击上方图标进行登录</p>
			<div class="login_shop">
				推荐商品
			</div>
		</div>
		<div v-else>
			<!-- 购物车没有商品，前去购物的提示 -->
			<div class="go_login" v-if="!isHisGoods">
				<van-icon class="icon" name="cart-o" @click="$router.push({name:'cate'})"/>
				<p>您还没有添加的商品，若要进行购买，请点击上方购物车图标进行挑选</p>
				<div class="login_shop">
					推荐商品
				</div>
			</div>
			<!-- 购物车主要内容 -->
			<div  class="item" v-for="item,id in shopcart" :key="id">
				<!-- 复选框 -->
				<van-swipe-cell class="card">
				<div class="ischicked">
					<van-checkbox checked-color="#489f20" v-model="item.isChecked"></van-checkbox>
				</div>
					  <van-card
						:price="item.price"
						desc="描述信息"
						:title="item.name"
						class="goods-card"
						:thumb="item.small_image"
					  >
					  <template #tags>
					      <van-stepper @plus="add(item)" @minus="reduce(item)" v-model="item.num" theme="round" button-size="22" disable-input />
					    </template>
					  </van-card>
					  <template #right>
						<van-button @click="remove(item,id)" square text="删除" type="danger" class="delete-button" />
					  </template>
				</van-swipe-cell>
				<!-- 下部提交订单 -->
				<van-submit-bar :disabled="!goodsnum" :button-text="`去支付(${goodsnum})`" @submit="goDingdan">
					
				  <!-- <van-checkbox @click="!goodsisChecked" class="isCheckedAll" checked-color="#489f20" v-model="goodsisChecked">全选</van-checkbox> -->
				  <div class="isCheckedAll" @click="toggle">
					  <van-icon class="dui" v-show="goodsisChecked" name="checked" color="#489f20"/>
					  <span v-show="!goodsisChecked"  class="quan"></span>
					  <span style="display: inline-block; margin-left: 5px; height: 30px; vertical-align: middle;">全选</span>
				  </div>
				  
				  <span class="priceAnd">
					合计:{{goodsprice | priceFilter}}
				  </span>
				</van-submit-bar>
			</div>
		</div>
	</div>
</template>

<script>
	import { Toast } from 'vant';
	import {cartChangeNumApi,cartReduceNumApi} from '@/api'
	import { Dialog } from 'vant';
	import {setStorage} from '@/plugins/localStorage'
	import {mapState,mapMutations,mapGetters} from 'vuex'
	export default {
		name:'cart',
		data(){
			return{
				// isChecked:true,
			}
		},
		created(){
			// console.log(1)
			// console.log(this.cart_shujv)
			console.log(this.$route)
			console.log(this.$route.matched)
		},
		computed:{
			...mapState(['shopcart','isDenglu']),
			...mapGetters(['goodsprice','goodsisChecked','goodsnum','isHisGoods'])
		},
		methods:{
			...mapMutations(['addnum','reducegoods','removegoods','removexzgoods']),
			//点击加
			async add(item){
				//先发送ajax，将数据给服务端
				let {token} = this.isDenglu
				let res = await cartChangeNumApi(item.id,"add",token)
				//给过去后，会返回一个true，false，若为ture，则证明正确，就将数据同步本地
				if(res.data.success_code === 200){
					let {id:goods_id,name:goods_name,small_image,price:goods_price,checked:isChecked,num} = item
					let shujv = {goods_id,goods_name,small_image,goods_price,num,isChecked}
					this.addnum(shujv)
					// alert(123)
				}else{
					Toast('添加失败');
				}
			},
			//点击减
			async reduce(item){
				let {token} = this.isDenglu
				let res = await cartReduceNumApi(item.id,"reduce",token)
				//给过去后，会返回一个true，false，若为ture，则证明正确，就将数据同步本地
				if(res.data.success_code === 200){
					this.reducegoods(item)
				}else{
					Toast('减少失败');
				}
			},
			//点击删除
			remove(item,id){
				this.reduce(item)
				this.removegoods(id)
			},
			toggle(){
				//获取到更新之前的数据，所以取反
				if(!this.goodsisChecked){
					Object.values(this.shopcart).map(item=>{item.isChecked = true})
				}else{
					Object.values(this.shopcart).map(item=>{item.isChecked = false})
				}
				setStorage("shopcart",this.shopcart)
			},
			//删除选中的商品
			remove_xuanzhong(){
				let a = Object.values(this.shopcart).filter(item=>item.isChecked)
				if(a.length == 0){
					Dialog.alert({
					  message: '没有要删除的商品',
					}).then(() => {
					  // on close
					});
					return
				}
				Dialog.alert({
				  message: '亲，你确定要删除吗',
				  theme: 'round-button',
				  showCancelButton:true,
				}).then(() => {
				  //挑选出没有被选中的商品数据，将之前的的覆盖就好了
					this.removexzgoods()
				});
				
				
			},
			goDingdan(){
				// alert('哈哈哈')
				this.$router.push({name:'confirm'})
			}
		}
	}
</script>

<style scoped lang="less">
	#cart{
		padding-left: 10px;
		box-sizing: border-box;
		padding-bottom: 50px;
		box-sizing: border-box;
		.go_login{
			position: fixed;
			left: 0;
			top: 50px;
			right: 0;
			bottom: 0;
			.icon{
				display: block;
				font-size: 80px;
				padding: 40px;
				color: #999;
				text-align: center;
			}
			p{
				text-align: center;
				color: #CCCCCC;
				font-size: 18px;
				margin-bottom: 40px;
			}
		}
		.cart_top{
			width: 100%;
			line-height: 50px;
			text-align: center;
			font-size: 20px;
			font-weight: 600;
			position: fixed;
			top: 0;
			z-index: 10;
			background-color: #fff;
		}
		.item{
			border-bottom: 1px solid #e5e5e5;
			.card{
				font-size: 16px;
				/deep/.van-swipe-cell__wrapper{
						display: flex;
						.ischicked{
							width: 30px;
							align-items: center;
							display: flex;
							align-items: center;
					}
					.goods-card{
						flex: 1;
					}
				}
				
				
			}
		}
	}
	.isCheckedAll{
		margin-right: 70px;
		.quan{
			width: 16px;
			height: 16px;
			border-radius: 50%;
			border: 1px solid #ccc;
			display: inline-block;
		}
		.dui{
			display: inline-block;
			font-size: 20px;
		}
	}
	.priceAnd{
		display: inline-block;
		width: 100px;
		color: red;
	}
	.van-submit-bar{
		bottom: 50px;
	}
	.goods-card {
	    margin: 0;
	    background-color: white;
	  }
	
	  .delete-button {
	    height: 100%;
	  }
	  .van-card__title{
	  	font-size: 16px;
	  	line-height: 30px;
	  }
	  .van-card__price{
	  	color: red;
	  }
	  .van-card__content{
		  position: relative;
		  .van-stepper{
		  		position: absolute;
				  right: 0;
				  bottom: 0;
		  }
	  }
</style>